<template>
  <div id="admin">
    <div id="menus">
      <Tabs :animated="false">
        <TabPane icon="md-person" label="用户管理">
          <admin-head></admin-head>
          <users-manage></users-manage>
        </TabPane>
        <TabPane icon="ios-photos-outline" label="图片管理">
          <admin-head></admin-head>
          <photo-manage></photo-manage>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import PhotoManage from "./components/PhotoManage";
import UsersManage from "./components/UsersManage";
import AdminHead from "./components/AdminHead";
export default {
  name: "Admin",
  components: {
    UsersManage,
    AdminHead,
    PhotoManage
  },
  data() {
    return {
      theme3: "dark"
    };
  }
};
</script>

<style>
#menus > ul {
  height: 100vh;
}
.ivu-tabs-bar {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  color: #fff;
  width: 12vw;
  height: 100vh;
  background-color: #ccc;
  padding: 25px;
}
.ivu-tabs-ink-bar {
  height: 0;
}
.ivu-tabs-nav .ivu-tabs-tab {
  display: block;
}
.ivu-tabs-nav-container::before {
  content: "管理员";
}
.ivu-tabs-content,
.ivu-tabs-bar {
  float: left;
}
.ivu-tabs-content {
  width: 85vw;
  margin-left: 10px;
}
.ivu-icon-ios-photos-outline:before,
.ivu-icon-md-person:before {
  font-size: 18px;
  line-height: 12px;
}
</style>
